import React from "react";
import {LdhFieldSet} from "@biz/PageCompnents";
import {
    LdhButton,
    LdhFormItem,
    LdhInput,
    LdhInputNumber,
    LdhMapRadioGroup,
    LdhMapSelect,
    LdhObjListSelect,
    LdhRadio,
    LdhRadioGroup,
    LdhUpload,
    Message
} from "@biz/Components";
import BaseDetailPage from "@biz/BaseDetailPage";
import GUtils from "@/utils";
import {createAction} from "../Action";
import Config from "../config";
import Store from "../Store";

import "../style.less"

const prefix = "advertisement-detail";
export default class AdvertisementDetail extends BaseDetailPage {

    constructor(props) {
        super(props);
        this.action = createAction();
        this.config = Config(this.action);
        this.store = new Store(props, this.config, this.action);
        this.className = prefix;
    }

    componentDidMount() {
        this.form().setFieldsValue({position: "1"})
        super.componentDidMount();
        this.action.getWxPageList();
        this.action.getDocFileList();
        this.action.getRichTextList();
    }

    onGetDetailCompleted(detail) {
        let linkType = detail.linkType + "";
        detail.pic = detail.picUrl;
        this.setState({linkType});
    }

    handleUploadChange(v) {
        let rsp = v.file.response;
        if (!rsp) return;
        if (rsp.success) {
            let {id, url, filepath} = rsp.vo;
            let {detail} = this.state;
            detail.fileId = id;
            detail.picUrl = url;
            detail.filepath = filepath;
            this.setState({detail})
        } else {
            Message.warning(rsp.errMsg);
        }
    }

    onSubmit(values) {
        let {detailStatus, detail, linkType} = this.state;
        let {id, fileId, picUrl, filepath} = detail;
        let vo = {id, ...values, fileId, picUrl, filepath, linkType};
        this.action[detailStatus](vo);
    }

    handleLinkTypeChange(e) {
        let linkType = e.target.value;
        this.setState({linkType})
        this.form().setFieldsValue({linkUrl: "", linkType})
    }

    renderDetail(isDetail) {
        let {loading, detail, linkType, wxPageList = [], docFileList = [], richTextList=[]} = this.state;
        let form = this.form();

        let LinkDiv = <LdhInput maxLength={255} showCount className="mt-10"/>;

        switch (linkType) {
            case "1":
                LinkDiv = <LdhObjListSelect list={wxPageList} valueField="code" className="mt-10"/>;
                break;
            case "2":
                LinkDiv = <LdhObjListSelect list={docFileList} valueField="id" labelField="title"/>;
                break;
            case "3":
                LinkDiv =
                    <LdhInput maxLength={255} showCount className="mt-10" placeholder="https://"/>;
                break;
            case "4":
                LinkDiv = <LdhObjListSelect list={richTextList} valueField="id" labelField="title"/>;
                break;
        }
        return <LdhFieldSet title="基本信息" btn={!isDetail} loading={loading}>


            <LdhFormItem label="广告位" name="position" required >
                <LdhMapSelect value={"1"} type="AdsPosition" disabled isDetail={isDetail}/>
            </LdhFormItem>
            <LdhFormItem label="标题" name="title" required isDetail={isDetail}>
                <LdhInput maxLength={60} showCount/>
            </LdhFormItem>
            <LdhFormItem label="排序" name="order" required isDetail={isDetail}>
                <LdhInputNumber min={0} className="w-full"/>
            </LdhFormItem>
            <LdhFormItem label="图片" name="pic" required isDetail={isDetail}>
                <LdhUpload action={GUtils.uploadUrl} maxCount={1} onChange={this.handleUploadChange.bind(this)}>
                    <LdhButton type="primary" className="upload-btn">点击上传 </LdhButton>
                    <span className="tip">只能上传 jpg/png/gif 文件，且不超过 2MB</span>

                </LdhUpload>
            </LdhFormItem>
            {detail.picUrl && <img src={detail.picUrl}/>}
            <LdhFormItem label="跳转类型" name="linkType">
                {
                    isDetail
                        ? <div> {GUtils.dealEnumValue(detail.linkType, "LinkType")} / {this.renderLinkInfo(detail)} </div>
                        : <div>
                            <LdhMapRadioGroup type="LinkType" isDetail={isDetail}
                                              onChange={this.handleLinkTypeChange.bind(this)} value={linkType}/>

                            <LdhFormItem hideLabel name="linkUrl" required isDetail={isDetail}>
                                {LinkDiv}
                            </LdhFormItem>
                            <span className="tip">{GUtils.dealEnumValue(linkType, "LinkTypeTip")}</span>
                        </div>
                }

            </LdhFormItem>

            <LdhFormItem label="状态" name="enabled" required>
                {
                    isDetail
                        ? <div>{GUtils.dealEnumValue(detail.enabled, "Show")}</div>
                        : <LdhRadioGroup>
                            <LdhRadio value={true}>展示</LdhRadio>
                            <LdhRadio value={false}>不展示</LdhRadio>
                        </LdhRadioGroup>
                }

            </LdhFormItem>


        </LdhFieldSet>

    }

    renderLinkInfo(detail) {
        let {wxPageList = [], docFileList = [], richTextList = []} = this.state;
        let {linkType, linkUrl} = detail;
        linkType = linkType + "";


        switch (linkType) {
            case "1": let map = GUtils.buildMap(wxPageList, "code", "name"); return map[linkUrl];
            case "2": let map2 = GUtils.buildMap(docFileList, "id", "title"); return map2[linkUrl];
            case "3": return linkUrl;
            case "4": let map4 = GUtils.buildMap(richTextList, "id", "title"); return map4[linkUrl];
            default: return linkUrl;
        }
    }
}